import React, { Component } from 'react'
import Son from './Son';
import Son2 from './Son2';

//类组件中的生命周期
// 01: constructor
//作用:  一般执行初始化操作, 01:给state 初始化赋值  02:给事件函数绑定this
//执行时间: 挂载前触发, 第一次加载加载组件触发, 数据更新不触发

// 02: render
// 作用: 渲染页面dom结构的, 不能省略该生命周期,
// 执行时间: 初始化执行,当组件自身的state 更新时或接收的props 变化时也触发

//03: componentDidMount
// 作用: 一般进行数据请求, 此时组件dom 已经插入到dom树上了挂载上了
// 执行时间: 初始化执行, 数据更新时不执行.

//问题? 为什么将数据请求写在该componentDidMount生命周期中
// constructor 一般已进行数据请求, 由于报错 导致render 声明周期不执行则用户看不到页面,影响体验
// render  因为当state 变化就触发, 而数据请求一般伴随着修改state 的操作,则会陷入死循环

// 04: componentDidupdate
// 作用: 数据更新后触发, 初始化不执行 类比vue 中updated


// 05: componentWillUnmount
// 作用: 组件卸载前触发  清理副作用 (定时器, 取消请求, 事件绑定)


export default class Father extends Component {
    state = {
        count: 0,
        num: 100,
        flag: true
    }
    constructor(props) {
        super(props)
        // console.log('constructor');
        // console.log(a);
    }
    render() {
        // console.log('render');
        return (
            <div>
                <p onClick={() => {
                    this.setState({
                        count: this.state.count + 10,
                        //num: this.state.num + 1
                    })
                }}>类组件-父-count:{this.state.count}</p>
                {/* 使用子组件 */}
                {/* <Son num={this.state.num}></Son> */}

                {/* 使用两个子组件 */}
                <p><button onClick={() => {
                    this.setState({
                        flag: !this.state.flag
                    })
                }}>切换Son1 和 Son2</button></p>
                {
                    this.state.flag ? <Son></Son> : <Son2></Son2>
                }


            </div>
        )
    }
    componentDidMount() {
        // console.log('componentDidMount');
    }
    componentDidUpdate() {
        // console.log('componentDidUpdate');
        // console.log(this.state.count);
    }
    componentWillUnmount() {

    }
}
